<template>
	<view class="bgDefault">
		<tn-nav-bar >社群主申请</tn-nav-bar>
		<view class="mentorApply" :style="{paddingTop: vuex_custom_bar_height+ 'px'}">
			<view class="form">
				<tn-form :model="model" ref="formcc" :errorType="errorType" :labelPosition="labelPosition" :labelWidth="labelWidth" :labelAlign="labelAlign">
					<tn-form-item label="手机号码"  :required="true" prop="mobile" rightIcon="phone" :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input v-model="model.mobile" type="number" placeholder="请输入手机号码" :border="border" :clearable="false"></tn-input>
					</tn-form-item>
					<tn-form-item label="介绍"  :required="true" prop="intro" :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-input v-model="model.intro" type="textarea" placeholder="请输入介绍" :border="border" :clearable="false"></tn-input>
					</tn-form-item>
					<tn-form-item label="热衷分类"  :required="true" prop="cateArray" :labelPosition="labelPosition" :labelAlign="labelAlign">
					  <tn-checkbox-group v-model="model.cateArray" :width="checkboxWidth" :wrap="checkboxWrap" @change="checkboxGroupChange">
					    <tn-checkbox v-for="(item, index) in cateboxList" :key="index" :name="item.name" >{{ item.name }}</tn-checkbox>
					  </tn-checkbox-group>
					</tn-form-item>
				</tn-form>
							
				<tn-button backgroundColor="#FF6708" :disabled="disabled" fontColor="#FFFFFF" width="100%" @click="submit">提交</tn-button>	
			</view>
			
		</view>
		<TemplateLoading :active="loading"></TemplateLoading>
	</view>
</template>

<script>
	import TemplateLoading from '../../components/loading.vue'
	import {addLeader,leaderOne,leaderCate} from '@/api/activity/index.js'
	export default {
		components:{TemplateLoading},
		data() {
			return {
				loading:false,
				cateboxList:[],
				model:{
					mobile:"",
					intro:"",
					cate_id:"",
					cateArray:[]
				},
				errorType: ['message','border-bottom','toast'],
				labelPosition: 'left',
				labelAlign: 'right',
				checkboxWrap: false,
				border: false,
				disabled:false,
				labelWidth: 160,
				rules: {
				  mobile: [
					{
						required: true,
						message: '请输入手机号码',
						trigger: ['blur']
					}
				  ],
				  intro: [
					{
					  min: 5,
					  message: '简介不能少于5个字',
					  trigger: 'change'
					},
					{
					  // 正则表达式验证演示
					  pattern: /^[\u4e00-\u9fa5]+$/gi,
					  message: '简介只能包含中文',
					  trigger: 'change'
					}
				  ],
				 cateArray: [
				   {
					 required: true,
					 message: '请选择分类',
					 trigger: 'change',
					 type: 'array'
				   }
				 ]
				}
			}
		},
		onLoad() {
			this.initData()
		},
		onReady() {
		  this.$refs.formcc.setRules(this.rules)
		},
		methods: {
			initData(){
				leaderCate().then(res=>{
					this.cateboxList = res
				})
				
				this.loading = true
				leaderOne().then(res=>{
					this.loading = false
				
					this.model.cateArray = res.cateArray || []
					this.model.cate_id = res.cate_id || ""
					this.model.mobile = res.mobile || ""
					this.model.intro = res.intro || ""
					
			
					if(res.status == 0){
						this.disabled = true
						
						uni.showToast({
							icon: 'none',
							duration:3000,
							title: '正在审核中，请稍后再试！',
						})
						
					}else if(res.status == 1){
						this.disabled = true
						
						uni.showToast({
							icon: 'none',
							duration:3000,
							title: '资料已审核通过！',
						})
					}else{
						uni.showModal({
							title:"审核失败消息",
							content:res.reason
						})
					}
				}, err=>{
					this.loading = false
				})
			},
			submit() {
			  this.$refs.formcc.validate(valid => {
			    if (valid) {
					this.loading = true
					
					console.log(this.model)
					addLeader(this.model).then(res=>{
						this.loading = false
						uni.showToast({
							icon: 'none',
							title: '申请已提交！'
						})
					},err=>{
						this.loading = false
					})
					
			    } else {
			       验证失败
				  console.log(this.model)
			    }
			  })
			},
			checkboxGroupChange(event) {
			  this.model.cateArray = event
			  var _ids = [];
			  this.cateboxList.map(re=>{
				  if(this.model.cateArray.includes(re.name)){
					  _ids.push(re.id)
				  }
			  })
			  this.model.cate_id = _ids.join(",")
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bgDefault{
		background: $tn-main-bg;
		min-height: 100vh;
	}
  .mentorApply{
	 // background: $tn-main-bg;
	  height: 100vh;
	  padding-left: 6%;
	  padding-right: 6%;
  }
  
  .tn-radius10{border-radius: 10rpx;}

</style>
